import React, { Component } from 'react';
import {
    Link
} from 'react-router-dom';

import { Get } from '../utils/fetch';

/**
 * 菜单
 */
class Menu extends Component {

    state = {
        dataList: [],
        userData: {}
    };

    componentDidMount = () => {
        Get(`/spi/navs`)
            .then((dataList) => {
                this.setState({ dataList: dataList });
            });

        Get('/spi/user/currentUser')
            .then((userData) => {
                userData.isAdmin = () => {
                    return userData.role === 'ADMIN';
                };
                global.userData = userData;
                this.setState({ userData: userData })
            });
    };

    render() {
        return (
            <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                    </button>
                    <Link className="navbar-brand" to="/">后台管理系统</Link>
                </div>
                <ul className="nav navbar-right top-nav">
                    <li className="dropdown">
                        {this._renderUser()}
                        <ul className="dropdown-menu">
                            <li>
                                <a onClick={this.logout} ><i className="fa fa-fw fa-power-off"></i> Log Out</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div className="collapse navbar-collapse navbar-ex1-collapse">
                    <ul className="nav navbar-nav side-nav">
                        {this.state.dataList.map(this._renderMenu)}
                    </ul>
                </div>
            </nav>
        );
    }

    _renderUser = () => {
        let { userData } = this.state;
        return (
            <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                <i className="fa fa-user"></i> {userData.userName} <b className="caret"></b>
            </a>
        )
    };

    _renderMenu = (menu, index) => {
        if (menu.children.length > 0) {
            return (
                <li key={index}>
                    <a data-toggle="collapse" data-target={`#demo${index}`}>
                        <i className="fa fa-fw fa-arrows-v"></i>
                        {menu.name}
                        <i className="fa fa-fw fa-caret-down"></i>
                    </a>
                    <ul id={`#demo${index}`} className="collapse in">
                        {menu.children.map(this._renderSubMenu)}
                    </ul>
                </li>
            )
        } else {
            return (
                <li key={index}>
                    <Link to={`${menu.url}`}><i className="fa fa-fw fa-edit"></i> {menu.name}</Link>
                </li>
            )
        }
    };

    _renderSubMenu = (menu, index) => {
        return (
            <li key={index}>
                <Link to={`${menu.url}`}><i className="fa fa-fw fa-edit"></i> {menu.name}</Link>
            </li>
        )
    };

    logout = () => {
        Get('/spi/user/logout').then(
            () => {
                window.location.href = '/login.html';
            }
        );
    }
}

export default Menu;